package com.dji.compose_learning.ui.view

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.dji.compose_learning.R

@Composable
fun MessageCard(msg: Message) {
//    val isExpanded = remember {
//        mutableStateOf(false)
//    }
    //是否展开
    var isExpanded by remember {
        mutableStateOf(false)
    }
    //背景色
    val surfaceColor: Color by animateColorAsState(
        if (isExpanded) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.surface
    )
    Row(modifier = Modifier
        .padding(8.dp)
        .clickable { isExpanded = !isExpanded }
        .background(MaterialTheme.colorScheme.background)) {
        Image(painter = painterResource(id = R.drawable.img),
            contentDescription = null,
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape))
        Spacer(modifier = Modifier.width(8.dp))
        Column {
            Text(text = msg.title, color = MaterialTheme.colorScheme.secondary)
            Spacer(modifier = Modifier.height(4.dp))
            Surface(color = surfaceColor,          //设置点击渐变色
                shape = RoundedCornerShape(5.dp),  //圆角
                shadowElevation = 1.dp,            //背景色阴影
                modifier = Modifier
                    .animateContentSize()          //显示动画
                    .padding(1.dp)
            ) {
                Text(text = msg.body,
                    style = MaterialTheme.typography.bodyMedium,
                    modifier = Modifier.padding(4.dp),
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1)
            }
        }
    }
}

@Composable
fun Conversation(messages: List<Message>) {
    LazyColumn {
        items(messages.size) {
            MessageCard(msg = messages[it])
        }
    }
}

















